<template>
	<div class="zoomIn"  v-if="showPageStatus">
		<div class="bg">
			<img :src="setData.answer_bg_image" alt="">
		</div>
		<div class="page">
			<div class="control">
				<div class="info_control">
					<img class="avatr" :src="userInfo.headimgurl"> </img>
					<span>{{score}}分</span>
				</div>
				<div class="turn" :style="{'background':openMusic?'rgba(0,0,0,.5)':'none'}">
					<MusicAutoPlay ref="audioCon" :music="setData.bgmusic" v-if="openMusic"></MusicAutoPlay>
				</div>
			</div>
			<div class="container" v-if="!noAllow">
				<div class="second" :class="{'heartBeat':allTime>0 && allTime<4}">{{allTime}}</div>
				<view class="progress_box">
					<div class="text"><span>题目{{progressText[0]}}</span>/{{progressText[1]}}</div>

					<progress class="progress" :active="true" active-mode="forwards" :duration="10"
						activeColor="#EB4F79" backgroundColor="#F6F6F6" :percent="progress" stroke-width="4" />
				</view>
				<div>
					<div class="title" :class="{'backOutLeft':nextStatus==false&& showPage}">
						{{questionDetail.type==0?'[单选题]':'[多选题]'}}{{questionDetail.title}}
					</div>
					<div class="dec_image" :class="{'tada':nextStatus==false&& showPage}" v-if="questionDetail.image!=''">
						<image :src="questionDetail.image" model="aspectFill"/>
					</div>
					<div class="result" :class="{'backOutRight':nextStatus==false && showPage}">
						<div class="options"
							v-for="(item,index) in options"
							:class="{'op_ri':item.status==1,'op_er':item.status==2,'pulse':item.status==1 && checkLastIndex(index),'shakeY':item.status==2 && checkLastIndex(index)}"
							:style="{ 'background':checkBgColor(item),'color':setFontColor(item)}" 
							@click="selectOption(item,index)" 
							>
							{{item.value}}
							<div class="icon">
								<img v-if="item.status==1" class="right" src="../../../static/answer/question_right.png"></img>
								<img v-if="item.status==2" class="error" src="../../../static/answer/question_error.png"></img>
							</div>
						</div>

					</div>
				<!-- 	<div v-if="!nextStatus && nextQuestionData.complete==0" class="btn" :style="{'background':setData.answer_enter_btn_color}" @click="submitAnswer(0)">
						确认
					</div> -->
					<div v-if="showBtnStatus" class="btn" :style="{'background':grayscaleValue,}" @click="submitAnswer(0)">
						确认
					</div>
				</div>
			</div>
			<div class="container" v-else style="text-align: center;line-height: 40rpx;height: 40rpx; padding:10rpx 0;">
				暂不支持您参与本活动！
			</div>
		</div>
		<finish v-if="showFinish" :prizeStatus="nextQuestionData.draw" :status="showStatus"  :record_id="record_id" @close="closeModal"></finish>
	</div>
</template>

<script>
	import finish from './finish.vue'
	import { startAnswer, } from '@/api/api'
	import { mapGetters } from 'vuex'
	import {isWeiXin} from '@/until/QFH5.js'
	export default {
		computed:{
			...mapGetters(['loginInfo']),
			grayscaleValue(){
				if(this.stopClick)return '#ccc'
				return this.setData.answer_enter_btn_color
			}
			
		},
		components: {
			finish
		},
		data() {
			return {
				allTime: 0, //倒计时
				progress: 0, //进度条
				progressText:[],
				timer: null, //计时器
				stopTime:0,//停止时间
				nextStatus: false,
				showFinish: false, //是否答题结束 
				showStatus:1,
				record_id:'',
				options:[],
				lastIndex:null,
				selectType:0,//0单选1多选
				showPage:false,//优化加载
				score:0,
				userInfo:{},
				
				actid: null,
				activityData: {},
				setData: {},
				questionData: {},
				questionDetail:{},
				nextQuestionData:{},
				openMusic:false,
				showPageStatus:false,
				showBtnStatus:false,
				stopClick:false,
				
				noAllow:false,
				preStopTime:0,//当前滞后停止时间
			}
		},
		methods: {
			setBtnStatus(){
				if(this.questionData.complete==0){
					if(this.questionData.next_question.type==1){
						return true
					}
					if(this.questionData.enter_btn==true && this.nextStatus==false){
						return true
					}
					return false
						
				}else{
					return false
					
				}
			},
			checkLastIndex(val){
				if(this.lastIndex.indexOf(val)>-1){
					return true
				}else{
					return false
				}
			},
			checkBgColor(data){
				let color = 'red'
				let sdata = this.setData
				let {status} = data
				if(!this.nextStatus){
					color = data.select? sdata.answer_select_btn_color:sdata.answer_btn_color
				}else{
					color =status==1? sdata.answer_right_btn_color:sdata.answer_error_btn_color
				}
				
				return color
			},
			setFontColor(data){
				let color = 'red'
				let sdata = this.setData
				color = data.select?sdata.answer_select_font_color:sdata.answer_font_color
				return color
			},
			startSecond(callBack=()=>{}) {
				let num = false
				console.log('开始',typeof(num))
				
				this.stopTime = 0
				let {question_type} = this.setData
				if (question_type==2){
					this.allTime = this.setData.question_limit
				}else if(question_type==1 && this.allTime==0){
					this.allTime = this.setData.question_limit
				}
				this.preStopTime = this.allTime	
				let _this = this
				this.timer = setInterval(() => {
					console.log('进行中')
					_this.allTime--
					if (_this.allTime <= _this.stopTime) {
						console.log('内循环强制停止')
						clearInterval(_this.timer)
						// let msg = '时间到了,游戏结束'
						if(question_type==2){
							// msg="时间到了，下一题"
							_this.submitAnswer(0,true)
						}else{
							_this.submitAnswer(0,false,true)
						}
						
					}
				}, 1000)
			},
			stopSecond() {
				console.log('停止')
				this.stopTime = this.allTime
				clearInterval(this.timer)
			},
			//next自循环 , complete //直接结束
			submitAnswer(val,next=false,complete=false) {
				if(this.stopClick == true && val==0){
					return
				}else if(val==0){
					this.stopClick = true
				}
				
				this.stopSecond()
				//0确认 1next
				if (val == 0) {
					//确认
					let arr = []
					this.options.forEach((item,index)=>{ if(item.select){ arr.push(item.value) } })
					let qsData = this.questionData
					let data = {
						record_id:qsData.record_id,
						option:JSON.stringify(arr),
						qid:qsData.next_question.id,
						time:this.setData.question_type==2?this.setData.question_limit-this.allTime:this.preStopTime-this.allTime,
					}
					//强制结束
					if(complete){ data.complete = 1 }
						
					let _this = this
					let callback = ()=>{ 
						//单选时间到了
						// if(next){this.submitAnswer(1)}
						
						if(this.nextQuestionData.complete==1){
							//没有下一题
							setTimeout(()=>{
								_this.showStatus = _this.nextQuestionData.pass?1:2
								_this.showFinish = true
							},1300)
							return
						}else{
							//替代用户点击下一题
							setTimeout(()=>{
								_this.submitAnswer(1)
							},1500)
						}
						this.nextStatus = true
					}
					this.init(data,callback)
				} else if (val == 1) {
					this.showPage = true
					this.nextStatus = false
					this.netxQuestion()
				}else if(val==3){
					// this.showStatus = 4
					// this.showFinish = true
				}
				

			},
			stopAnswer() {

			},
			//选择参数
			selectOption(data,index){
				this.showBtnStatus = this.setBtnStatus()
				console.log('123456',this.showBtnStatus)
				if(this.selectType==0){
					//单选
					this.lastIndex=[]
					this.lastIndex.push(index)
					this.options.forEach(item=>{item.select=false})
					data.select = true
					
					if(!this.nextQuestionData.enter_btn){
						this.submitAnswer(0)
					}
					
				}else{
					data.select = !data.select
					let sindex = this.lastIndex.indexOf(index)
					if(sindex>-1){
						this.lastIndex.splice(sindex,1)
					}else{
						this.lastIndex.push(index)
					}
				}
				
				// this.options.forEach(item=>{console.log('option',item.select)})
				console.log('*---- ',data.select,index,this.lastIndex)
			},
			closeModal(){
				//强制回退
				this.backHome()
			},
			//检查对错
			checkRight(){
				let rightArr = this.nextQuestionData.right
				this.options.forEach((child,index)=>{
					rightArr.forEach((item,itemIndex)=>{
						if(child.status==0 || child.status==2){
							if(item==child.value){
								child.status = 1
							}else{
								child.status = 2
							}
						}
					})
				})
				let url = this.nextQuestionData.is_right?'恭喜你答对了':'很遗憾你答错了！再接再厉！'
				uni.showToast({
					title:url,
					duration:1000,
					icon:'none'
				})
				this.nextStatus = true
			},
			//下一题action
			netxQuestion(){
				this.showBtnStatus = false
				this.lastIndex = []
				let data =JSON.parse( JSON.stringify(this.nextQuestionData))
				this.selectType = data.next_question.type
				this.questionData = data
				
				this.questionDetail = data.next_question
				let arr = []
				data.next_question.order_options.forEach(item=>{
					let obj={ value:item, select:false,status:0 }
					arr.push(obj)
				})
				this.options = arr
				this.stopClick = false
				this.startSecond()
			},
			//读取进度
			getProgress(){
				let val = this.progressText[0]
				let allVal = this.progressText[1]
				let result = (val/allVal)*100
				this.progress =  result.toFixed(0)
			},
			init(val={},callback=()=>{},isInit=false) {
				let data = { plugin: 'answer', actid: this.actid }
				let postData = Object.assign({},data,val)
				startAnswer(postData).then(res => {
					if(res.code==401){
						this.backHome()
					}
					if(res.code==1){
						uni.showToast({
							title:res.text,
							icon:'none'
						})
						setTimeout(()=>{
							let url = '/?type=answer&plugin=answer&id='+this.actid
							uni.navigateTo({ url:url })
						},2000)
						return
					}
					if(res.code==10010 || res.code==10011){
						// uni.showToast({text:'hello'})
						// this.backHome()
						this.noAllow = true
					}
					this.showPageStatus = true
					this.nextQuestionData = res.data
					this.score = this.nextQuestionData.score==null?0:this.nextQuestionData.score
					this.score = Number(this.score).toFixed(0)
					this.record_id = res.data.record_id
					this.progressText = res.data.progress
					this.progressText.forEach(item=>{
						item = Number(item)
					})
					this.getProgress()
					if(isInit)
						this.netxQuestion()
					else{
						this.checkRight()
					}
					
					callback()
				
				})
			},
			backHome(){
				console.log('111')
				uni.navigateTo({
					url:'/?type=answer&plugin=answer&id=' + this.actid
				})
			},
		},
		mounted() {
			let data = uni.getStorageSync('answerData') || null
			if (data == null) {
				//强制回退
				this.backHome()
			}
			this.activityData = data
			this.setData = data.settings
			this.openMusic = this.setData.open_music
			
			let userdata  = {}
			if(isWeiXin()){
				userdata = uni.getStorageSync('wechatInfo'+uni.getStorageSync('actid'))
			}else{
				userdata = this.loginInfo 
			}
			if(!userdata.hasOwnProperty('headimgurl') || userdata.headimgurl==''){
				userdata.headimgurl = userdata.avatar
			}
			this.userInfo = userdata
			this.init(null,()=>{},true)
			
			this.$nextTick(() => {
				// this.$refs['audioCon'].addEvent()
				
			})
			
		},
		onLoad(op) {
			this.actid = op.id
		}
	}
</script>

<style lang="scss">
	@import url("../animation.css");
	.bg {
		width: 100%;
		height: 100vh;
		z-index: -1;
		position: fixed;
		left: 0;
		top: 0;

		img {
			width: 100%;
			height: 100vh;
		}
	}

	.page {
		width: 100%;
		min-height: 100vh;
		padding: 1rpx 0 70rpx;

	}

	.control {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 86rpx;
		margin-top: 60rpx;

		.info_control {
			margin-left: 38rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.avatr {
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			span {
				margin-left: 18rpx;
				font-size: 42rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}
		}

		.turn {
			margin-right: 38rpx;
			width: 68rpx;
			height: 68rpx;
			line-height: 58rpx;
			background: rgba(0, 0, 0, .5);
			border-radius: 50%;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	}

	.container {
		width: 589rpx;
		// min-height: 1020rpx;
		margin: 88rpx auto 70rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 30rpx;
		opacity: 0.9;
		position: relative;
		padding: 1px 40rpx 70rpx;

		.second {
			position: absolute;
			left: 50%;
			top: 0;
			margin: -56rpx 0 0 -56rpx;
			width: 122rpx;
			height: 122rpx;
			text-align: center;
			line-height: 112rpx;
			background: #1F0F3B;
			box-shadow: 0px -3rpx 20rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 50%;
			border: 4rpx solid #FFFFFF;
			color: #fff;
			font-size: 45rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
		}
		.heartBeat {
			-webkit-animation-name: heartBeat;
			animation-name: heartBeat;
			-webkit-animation-duration: 1s;
			animation-duration: 1s;
			-webkit-animation-duration: calc(var(--animate-duration)*1);
			animation-duration: calc(var(--animate-duration)*1);
			-webkit-animation-timing-function: ease-in-out;
			animation-timing-function: ease-in-out;
			animation-iteration-count:infinite;
		}

		.progress_box {
			margin-top: 81rpx;

			.text {
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				letter-spacing: 2rpx;

				span {
					color: #EB4F79;
					font-size: 26rpx;
				}
			}

			.progress {
				margin-top: 23rpx;

				& /deep/ .uni-progress-bar {
					// background-color:#F6F6F6;
					border-radius: 6rpx !important;
				}

				& /deep/ .uni-progress-inner-bar {
					// background-color: #EB4F79!important;
					border-radius: 6rpx !important;
				}
			}


		}

		.title {
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			line-height: 34px;
			margin-top: 30rpx;
		}
		.dec_image{
			width: 100%;
			line-height: 0;
			background-color: rgb(230,230,230);
			border-radius: 20rpx;
			image{
				width: 100%;
				max-height: 320rpx;
				border-radius: 20rpx;
			}
		}
		.backOutLeft {
			animation: backOutLeft 1s 1;
		}

		.backOutRight {
			animation: backOutRight 1s 1;
		}

		.result {
			margin-top: 31rpx;

			.options {
				white-space: normal;
				padding: 30rpx 85rpx;
				text-align: center;
				// background: #F6F6F6;
				line-height: 56rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				margin-bottom: 20rpx;
				position: relative;
				// border-radius: 50rpx;
				border-radius: 15rpx;
				

				.right,
				.error {
					position: absolute;
					top: 50%;
					right: 31rpx;
				}

				.right {
					width: 44rpx;
					height: 30rpx;
					margin-top: -15rpx;
				}

				.error {
					width: 33rpx;
					height: 33rpx;
					margin-top: -16.5rpx;
				}
			}
			// .selected{
			// 	background: #E7E7E7;
			// }
			.flash {
				-webkit-animation-name: flash;
				animation: flash 1s 1;
			}
			.shakeY {
				-webkit-animation-name: shakeY;
				animation: shakeY 0.6s 1;
			}
			.pulse {
				-webkit-animation-name: pulse;
				animation-name: pulse;
				animation: pulse 0.7s 1;
				-webkit-animation-timing-function: ease-in-out;
				animation-timing-function: ease-in-out
			}
			.op_er {
				// background: #FFEFEF!important;
				color: #C60000!important;
			}

			.op_ri {
				// background: #DBF0FF!important;
				color: #236FA6!important;
			}
		}

		.btn {
			margin: 50rpx auto 0;
			width: 320rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			background: #EE4D8D;
			// box-shadow: 0px 6rpx 20rpx 1rpx rgba(139, 9, 36, 0.2);
			border-radius: 50rpx;
		}

	}

	
	
	
	
	
	
	
	
	
</style>
